<template>
  <view class="body">
    <view class="tabs">
      <view class="tab">
        <text :class="tab == 'base' ? 'active' : ''" @tap="tabChange('base')"> 基本信息 </text>
        <view v-if="tab == 'base'" class="tab_active"></view>
      </view>
      <view class="tab">
        <text :class="tab == 'medical' ? 'active' : ''" @tap="tabChange('medical')">
          医疗信息
        </text>
        <view v-if="tab == 'medical'" class="tab_active"></view>
      </view>
    </view>
    <view class="info_content">
      <view v-if="tab == 'base'" class="info">
        <view class="cell">
          <view class="title">姓名</view>
          <view class="content">{{ baseInfo.patName }}</view>
        </view>
        <view class="cell">
          <view class="title">身份证号</view>
          <view class="content">{{ baseInfo.idNo }}</view>
        </view>
        <view class="cell">
          <view class="title">性别</view>
          <view class="content">{{ baseInfo.gender }}</view>
        </view>
        <view class="cell">
          <view class="title">年龄</view>
          <view class="content">{{ baseInfo.age }}岁</view>
        </view>
        <!-- <view class="cell">
                    <view class="title">出生年月</view>
                    <view class="content">{{ baseInfo.birthday || '暂无' }}</view>
                </view> -->
        <view class="cell">
          <view class="title">手机号</view>
          <view class="content">{{ baseInfo.phone || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">地址</view>
          <!-- <view class="content" @tap="showPop('address')"
            >{{ baseInfo.address ? baseInfo.address.length + '个' : '' }}
            <image src="@/static/image/raozg/black_more.png" class="more" />
          </view> -->
          <view class="content">{{ baseInfo.address || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">ABO血型</view>
          <view class="content">{{ baseInfo.abo || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">Rh血型</view>
          <view class="content">{{ baseInfo.rh || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">医疗支付方式</view>
          <view class="content">{{ baseInfo.medicare || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">婚姻状况</view>
          <view class="content">{{ baseInfo.marital || '暂无' }}</view>
        </view>
        <!-- <view class="cell">
          <view class="title">常住类型</view>
          <view class="content">暂无</view>
        </view> -->
        <view class="cell">
          <view class="title">民族</view>
          <view class="content">{{ baseInfo.nation || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">文化程度</view>
          <view class="content">{{ baseInfo.education || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">职业类别</view>
          <view class="content">{{ baseInfo.occupation || '暂无' }}</view>
        </view>
        <view class="cell">
          <view class="title">联系人信息</view>
          <!-- <view class="content" @tap="showPop('contact')"
            >{{ baseInfo.contacts ? baseInfo.contacts.length + '个' : '' }}
            <image src="@/static/image/raozg/black_more.png" class="more" />
          </view> -->
          <view class="content">{{ baseInfo.contacts || '暂无' }}</view>
        </view>
      </view>
      <up-popup
        :show="show"
        :round="32"
        mode="center"
        class="detail_pop"
        closeable
        @close="show = false"
      >
        <view class="title">{{ popType == 'address' ? '地区详细地址' : '联系人信息' }}</view>
        <view v-if="popType == 'address'" class="lists">
          <view v-for="(item, index) of baseInfo.address" :key="index" class="address_item">
            <view class="item_top">{{ item.area }}</view>
            <view class="item_bottom">{{ item.address }}</view>
          </view>
        </view>
        <view v-if="popType == 'contact'" class="lists">
          <view v-for="(item, index) of baseInfo.contacts" :key="index" class="contact_item">
            <text class="name">{{ item.name }}</text>
            <text class="relation">{{ item.relation }}</text>
            <text class="phone">{{ item.phone }}</text>
          </view>
        </view>
      </up-popup>
      <MedicalInfo v-if="tab == 'medical'" :result="medicalInfo" :gender="baseInfo.gender" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import MedicalInfo from './medicalInfo.vue'
import { base_info, history } from '@/api/moreMessage'
import { onShow } from '@dcloudio/uni-app'

const tab = ref('base')
const show = ref(false)
const popType = ref('')
const baseInfo = ref({})
const medicalInfo = ref({})

onShow(() => {
  init()
})

const tabChange = (item: string) => {
  tab.value = item
  if (tab.value == 'medical') {
    getHistory()
  }
}
const showPop = (val) => {
  popType.value = val
  show.value = true
}
const init = () => {
  baseInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  if (baseInfo.value.contactName) {
    baseInfo.value.contacts = baseInfo.value.contactName + ' ' + baseInfo.value.contactRelation + ' ' + baseInfo.value.contactPhone
  }
}
const getHistory = () => {
  history(baseInfo.value.empi).then((res) => {
    medicalInfo.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.body {
  .tabs {
    width: 100%;
    height: 84rpx;
    background: #fff;
    .tab {
      display: inline-block;
      padding: 0 32rpx;
      height: 84rpx;
      color: #666666;
      font-weight: 400;
      font-size: 28rpx;
      text {
        display: block;
        height: 78rpx;
        line-height: 78rpx;
      }
      .active {
        font-size: 36rpx;
        font-weight: bold;
        color: #222222;
      }
      .tab_active {
        width: 24rpx;
        height: 6rpx;
        background: #00d1b6;
        border-radius: 4rpx;
        margin: 0 auto;
      }
    }
  }
  .info_content {
    padding: 24rpx 32rpx;
    height: calc(100vh - 168rpx);
    overflow: auto;
    .info {
      padding: 0 32rpx;
      background: #ffffff;
      border-radius: 12rpx;
      .cell {
        padding: 34rpx 0;
        border-bottom: 1rpx solid #e5e6eb;
        display: flex;
        justify-content: space-between;
        .title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
        .content {
          font-weight: 400;
          font-size: 30rpx;
          color: #222222;
          width: 400rpx;
          text-align: right;
          .more {
            width: 40rpx;
            height: 40rpx;
            transform: translateY(10rpx);
          }
        }
      }
      .cell:last-child {
        border: none;
      }
    }
    .u-popup {
      .title {
        height: 108rpx;
        line-height: 108rpx;
        text-align: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }
      .lists {
        width: 640rpx;
        max-height: 500rpx;
        overflow: auto;
        padding: 0 40rpx;
        margin-bottom: 40rpx;
        box-sizing: border-box;
        .address_item {
          font-weight: 400;
          font-size: 30rpx;
          color: #666666;
          margin-bottom: 40rpx;
          .item_top {
            margin-bottom: 20rpx;
          }
        }
        .contact_item {
          font-weight: 400;
          font-size: 30rpx;
          color: #666666;
          margin-bottom: 40rpx;
          display: flex;
          justify-content: flex-start;
          padding-left: 58rpx;
          .name {
            width: 20%;
          }
          .relation {
            width: 20%;
            margin-left: 40rpx;
          }
          .phone {
            width: 50%;
            margin-left: 40rpx;
          }
        }
        .contact_item:last-child {
          margin-bottom: 0 !important;
        }
      }
    }
  }
}
::v-deep .u-icon__icon {
  font-size: 40rpx !important;
  top: 16rpx !important;
}
::v-deep .u-safe-area-inset-bottom {
  padding-bottom: 0 !important;
}
</style>
